<template>
  <el-container class="container">
    <el-header>
      <!--透明  background-color="transparent"-->
      <!--黑灰  background-color="#545c64"-->
      <!--白字  text-color="#fff"-->
      <!--      :default-active="activeIndex"-->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#ffd04b"
        router
      >
        <el-row type="flex" class="row-bg" justify="end" style="margin-right: 150px">
          <el-col :span="6">
            <el-menu-item class="logo" index="0"></el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="/index/home">首页</el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="/index/clubList">社团</el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="/index/activities">活动</el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="/index/news">新闻</el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="3">制度</el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="4">登录</el-menu-item>
          </el-col>
          <el-col :span="3">
            <el-menu-item index="5">学生注册</el-menu-item>
          </el-col>
        </el-row>
      </el-menu>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
    <!--    <el-footer>Footer</el-footer>-->
  </el-container>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      activeIndex: "",
      images: [
        {url: require("@/assets/1.jpg")},
        {url: require("@/assets/2.jpg")},
        {url: require("@/assets/3.jpg")},
        {url: require("@/assets/4.jpg")}
      ],
      computed: {
        defaultActive: function () {
          return this.$route.path.replace('/', '/index/home');
        }
      },

    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}

.el-menu {
  /*z-index: 9999;*/
  background-color: #F7FAFC;
}

.el-row {
  /*z-index: 9999*/
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0;

}

.el-main {
  background-color: #f6f6f6;
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
  padding: 0;
  /*内容向上移动，透明header效果*/
  /*margin-top: -100px;*/
}

.container {
  margin-bottom: 10px;
}

.logo {
  float: left;
  margin-left: 0;
  width: 230px;
  height: 60px;
  background-size: 233px 57px;
  /*我的社团logo*/
  background-image: url(../../assets/header.png);
}
</style>
